<template>
  <div>
    <div class="loginBox" v-if="!isLogin">
      <p class="loginTxt">
        登录网易云音乐，可以享受无限收藏的乐趣，并且无限同步到手机
      </p>
      <div class="loginBtn">用户登录</div>
    </div>
    <div class="userInfoBox" v-if="isLogin && userDetail">
      <div class="userInfoBoxTop">
        <div class="headPortrait">
          <img
            class="headPortraitImg"
            :src="userDetail.profile.avatarUrl"
            alt=""
          />
        </div>
        <div class="nameBox">
          <p class="nickname">{{ userDetail.profile.nickname }}</p>
          <p class="lvBox">
            <span class="lvIcon"
              >{{ userDetail.level }} <i class="lvRight"></i
            ></span>
          </p>
          <div class="signInBtn">
            <i v-if="!userDetail.pcSign">签 到</i>
            <i v-if="userDetail.pcSign">已 签 到</i>
          </div>
          <!-- <div class="yseSignInBtn">
            <i>已 签 到</i>
          </div> -->
        </div>
      </div>
      <ul class="userInfoBoxButton">
        <li>
          <p>{{ userDetail.profile.eventCount }}</p>
          动态
        </li>
        <li>
          <p>{{ userDetail.profile.follows }}</p>
          关注
        </li>
        <li>
          <p>{{ userDetail.profile.followeds }}</p>
          粉丝
        </li>
      </ul>
    </div>
  </div>
</template>

<script>
import { mapState, mapGetters } from "vuex";
import { getUserInfo } from "@/api";
export default {
  data() {
    return {
      userDetail: null,
    };
  },
  created() {
    this.getUserInfoFn();
  },
  watch: {
    isLogin(newValue) {
      if (newValue) this.getUserInfoFn();
    },
  },
  computed: {
    ...mapGetters("loginStore", ["isLogin"]),
    ...mapState("loginStore", ["userInfo"]),
  },
  methods: {
    getUserInfoFn() {
      if (!this.isLogin) return;
      getUserInfo({ uid: this.userInfo.profile.userId }).then((res) => {
        this.userDetail = res;
      });
    },
  },
};
</script>

<style lang="scss" scoped>
.loginBox {
  background: url("./../../assets/imges/PopularRecommendationIcon.png")
    no-repeat 0 0;
  height: 126px;
  .loginTxt {
    width: 205px;
    color: #666;
    font-size: 12px;
    margin: 0 auto;
    padding: 16px 0;
    line-height: 22px;
  }
  .loginBtn {
    width: 100px;
    height: 31px;
    line-height: 31px;
    text-align: center;
    color: #fff;
    margin: 0 auto;
    background: url("./../../assets/imges/PopularRecommendationIcon.png")
      no-repeat 0 -195px;
    text-shadow: 0 1px 0 #8a060b;
    cursor: pointer;
    font-size: 12px;
  }
}
.userInfoBox {
  // background: url("./../../assets/imges/PopularRecommendationIcon.png")
  //   no-repeat 0 -270px;
  background: #f5f5f5;
  border-bottom: 1px solid #ccc;
  height: 165px;
  padding-top: 20px;
  .userInfoBoxTop {
    display: flex;
    .headPortrait {
      width: 80px;
      height: 80px;
      margin-left: 20px;
      padding: 2px;
      background: #fff;
      border: 1px solid #dadada;
      display: inline-block;
      cursor: pointer;
      .headPortraitImg {
        display: block;
        width: 80px;
        height: 80px;
      }
    }
    .nameBox {
      flex: 1;
      margin-left: 18px;
      padding-top: 3px;
      .nickname {
        width: auto;
        max-width: 100%;
        vertical-align: middle;
        overflow: hidden;
        text-overflow: ellipsis;
        font-weight: 700;
        white-space: nowrap;
        font-size: 14px;
        &:hover {
          text-decoration: underline;
          color: #333;
        }
      }
    }
    .lvBox {
      margin-top: 5px;
      .lvIcon {
        display: inline-block;
        height: 17px;
        overflow: hidden;
        padding-left: 25px;
        line-height: 17px;
        color: #999;
        font-weight: bold;
        font-style: italic;
        background: url("./../../assets/imges/iconOne.png") no-repeat -130px -64px;
      }
      .lvRight {
        float: right;
        width: 8px;
        height: 17px;
        background: url("./../../assets/imges/iconOne.png") no-repeat -192px -64px;
      }
    }
    .signInBtn {
      margin-top: 10px;
      border-radius: 4px;
      text-align: center;
      display: inline-block;
      overflow: hidden;
      padding: 0 5px 0 0;
      cursor: pointer;
      background: url("./../../assets/imges/backgroundStripe.png") no-repeat
        right -428px;
      i {
        width: 60px;
        height: 31px;
        padding: 0 15px 0 20px;
        font-size: 12px;
        line-height: 31px;
        color: #fff;
        background: url("./../../assets/imges/backgroundStripe.png") no-repeat 0 -387px;
        display: inline-block;
      }
    }
    .yseSignInBtn {
      margin-top: 10px;
      border-radius: 4px;
      text-align: center;
      display: inline-block;
      overflow: hidden;
      padding: 0 5px 0 0;
      cursor: pointer;
      background: url("./../../assets/imges/backgroundStripe.png") no-repeat
        right -346px;
      i {
        width: 60px;
        height: 31px;
        padding: 0 15px 0 20px;
        font-size: 12px;
        line-height: 31px;
        color: #bebebe;
        background: url("./../../assets/imges/backgroundStripe.png") no-repeat 0 -305px;
        display: inline-block;
      }
    }
  }
  .userInfoBoxButton {
    margin: 22px 0 0 20px;
    li {
      display: inline-block;
      height: 40px;
      padding: 0 18px;
      border-right: 1px solid #e4e4e4;
      cursor: pointer;
      margin-left: 2px;
      color: #666;
      font-size: 12px;
      &:last-child {
        border-right: none;
      }
      &:nth-child(1) {
        padding-left: 0;
      }
      p {
        font-size: 20px;
        font-weight: normal;
      }
    }
  }
}
</style>